<template>
  <Pannel @refresh="onRefresh" @load="onLoad" finshed>
    <div class="contonier">
      <div class="title">
        <div class="title-context1">经纪机构</div>
        <div class="title-context2">|</div>
        <div class="title-context3">从业人员</div>
      </div>
      <div class="describe">数据来源：泰州市存量房交易服务平台</div>

      <div class="button-group">
        <van-button
          v-for="(item, index) of btnList"
          :key="index"
          :class="['btn', curIndex === index ? 'active' : '']"
          @click="handleChangeBtn(index, { path: '/EconomicInstitutionsList', query: { name: 'Kimi' } })"
          :color="handleIsActive(index)"
          >{{ item.text }}</van-button
        >
      </div>
    </div>
  </Pannel>
</template>

<script>
export default {
  name: 'EconomicInstitutions',
  components: {},
  data() {
    return {
      curIndex: 0,
      btnList: [{ text: '经纪机构查询' }, { text: '从业人员查询' }]
    }
  },
  computed: {},
  methods: {
    onRefresh() {},
    onLoad(func) {
      //  加载页面
    },
    handleChangeBtn(index, opt) {
      this.curIndex = index
      this.$router.push(opt)
    },
    handleIsActive(index) {
      if (this.curIndex === index) {
        return '#fff'
      } else {
        return 'transparent'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.contonier {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 100px;
  width: 100vw;
  min-height: 100vh;
  background: url('assets/images/EconomicInstitutions1.png') no-repeat scroll top center#fff;
  background-size: 100%;
  box-sizing: border-box;

  .title {
    margin-top: 900px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 50px;
    font-weight: bold;
    color: #21ca91;
  }

  .describe {
    margin: 40px 0;
    font-size: 24px;
  }

  .button-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background: rgba(35, 202, 146, 1);

    .btn {
      height: 76px;
      border-radius: 10px;
      color: #fff !important;

      &.active {
        color: #424242 !important;
      }
    }
  }
}
</style>